<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>欢迎使用旅游爱好者管理系统</span>
      </div>
    </template>
    <div class="dashboard">
      <div class="welcome-message">
        <h2>您好，{{ userInfo.userName || '管理员' }}</h2>
        <p>今天是 {{ today }}，祝您工作愉快！</p>
      </div>
      
      <!-- 简单的数据概览 -->
      <div class="stats-container">
        <el-statistic class="stat-item" :value="memberCount" :precision="0" label="会员总数" />
        <el-statistic class="stat-item" :value="travelCount" :precision="0" label="旅行活动" />
        <el-statistic class="stat-item" :value="pendingApps" :precision="0" label="待处理申请" />
        <el-statistic class="stat-item" :value="forumPosts" :precision="0" label="论坛帖子" />
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGlobalStore } from '../store/userInfo'

const store = useGlobalStore()
const userInfo = computed(() => store.userInfo)

// 模拟数据 - 旅游系统相关
const memberCount = ref(156)
const travelCount = ref(28)
const pendingApps = ref(7)
const forumPosts = ref(324)

// 获取今天的日期
const today = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})
</script>

<style scoped>
.dashboard {
  padding: 20px 0;
}

.welcome-message {
  margin-bottom: 30px;
  text-align: center;
}

.welcome-message h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.welcome-message p {
  margin: 0;
  color: #606266;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
</style>